<!-- 个人中心 -->
<script setup lang="ts">
import { onMounted, ref, reactive } from "vue"
import { type FormInstance, type FormRules, ElMessage } from "element-plus"
import { fetchSelectList } from "@/api/common"
import { type SelectData } from "@/api/common/types/common"
import { useUserStore } from "@/store/modules/user"

const loading = ref<boolean>(false)
const userStore = useUserStore()
const userInfo = ref(userStore.userInfo)
const dialogVisible = ref<boolean>(false)
const passwordDialogVisible = ref<boolean>(false)
const formRef = ref<FormInstance | null>(null)
const formData = ref({
  userId: 0,
  groupId: 0,
  assignee: ""
})
const password = ref<string>("")

const formRules = reactive<FormRules>({
  groupId: [{ required: true, trigger: "blur", message: "请选择小组" }],
  assignee: [{ required: true, trigger: "blur", message: "请输入jira账号" }]
})

// 小组下拉框
const groupSelectOptions = ref<SelectData[]>([])
const fetchGroupSelectOptions = async () => {
  const data = await fetchSelectList("group")
  groupSelectOptions.value = data.data
}
const resetForm = () => {
  formRef.value?.clearValidate()
  formData.value = {
    userId: 0,
    groupId: 0,
    assignee: ""
  }
}
const openDialog = () => {
  if (userInfo.value?.id) {
    formData.value.userId = userInfo.value?.id
    formData.value.assignee = userInfo.value?.assignee
  }
  if (userInfo.value?.groupId) {
    formData.value.groupId = userInfo.value?.groupId
  }

  dialogVisible.value = true
}

const openPasswordDialog = () => {
  password.value = ""
  passwordDialogVisible.value = true
}

const handleUpdateGroup = () => {
  formRef.value?.validate((valid: boolean, fields) => {
    if (!valid) return console.error("表单校验不通过", fields)
    loading.value = true
    userStore
      .updateGroup(formData.value.userId, formData.value.groupId, formData.value.assignee)
      .then(() => {
        ElMessage.success("操作成功")
        dialogVisible.value = false
        userInfo.value = userStore.userInfo
      })
      .finally(() => {
        loading.value = false
      })
  })
}

const handleUpdatePassword = () => {
  const userId = userInfo.value?.id
  if (!userId) {
    ElMessage.error("请先登录")
    return
  }

  loading.value = true
  userStore
    .updatePassword(userId, password.value)
    .then(() => {
      ElMessage.success("操作成功")
      passwordDialogVisible.value = false
    })
    .finally(() => {
      loading.value = false
    })
}
onMounted(() => {
  fetchGroupSelectOptions()
})
</script>
<template>
  <div class="app-container">
    <el-row class="home" :gutter="20">
      <!-- home 左侧部分 -->
      <el-col :span="8" style="margin-top: 20px">
        <el-card shadow="hover">
          <div class="user">
            <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" class="user" />
            <div class="user-info">
              <p class="user-info-admin">{{ userInfo?.userCode }}</p>
              <p class="user-info-p">{{ userInfo?.typeText }}</p>
            </div>
          </div>
          <div class="login-info">
            <p>
              用户名<span>{{ userInfo?.userName }}</span>
            </p>
            <p>
              小组：<span>{{ userInfo?.groupName }}</span>
            </p>
            <p>
              jira账号：<span>{{ userInfo?.assignee ? userInfo?.assignee : "无" }}</span>
            </p>
            <p>
              <el-button-group>
                <el-button type="primary" bg size="small" @click="openDialog">修改个人信息</el-button>
                <el-button type="warning" size="small" @click="openPasswordDialog">修改密码</el-button>
              </el-button-group>
            </p>
          </div>
        </el-card>

        <el-card shadow="hover" class="user-table" />
      </el-col>
      <!-- home  右侧count部分 -->
      <el-col :span="16" style="margin-top: 20px">
        <div class="num">
          <!-- <el-card :body-style="{ display: 'flex', padding: 0 }" v-for="item in countData" :key="item.name">
            <component :is="item.icon" class="icons" :style="{ background: item.color }"></component>
            <div class="detail">
              <p class="num">￥{{ item.value }}</p>
              <p class="txt">￥{{ item.name }}</p>
            </div>
          </el-card> -->
        </div>
      </el-col>
    </el-row>

    <!-- 修改个人信息 -->
    <el-dialog v-model="dialogVisible" title="修改个人信息" @closed="resetForm" width="30%">
      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" label-position="left">
        <el-form-item prop="assignee" label="jira账号">
          <el-input v-model="formData.assignee" placeholder="请输入" />
        </el-form-item>

        <el-form-item prop="groupId" label="小组">
          <el-select v-model="formData.groupId" clearable placeholder="请选择小组">
            <el-option v-for="item in groupSelectOptions" :key="item.id" :label="item.text" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleUpdateGroup" :loading="loading">确认</el-button>
      </template>
    </el-dialog>

    <!-- 修改密码 -->
    <el-dialog v-model="passwordDialogVisible" title="修改密码" @closed="passwordDialogVisible == false" width="30%">
      <el-form label-width="100px" label-position="left">
        <el-form-item label="密码">
          <el-input type="password" show-password v-model="password" placeholder="请输入密码" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="passwordDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleUpdatePassword" :loading="loading">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.home {
  height: 100%;
  overflow: auto;

  .user {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;

    img {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      margin-right: 40px;
    }

    .user-info {
      p {
        line-height: 40px;
      }

      .user-info-p {
        color: #999;
      }

      .user-info-admin {
        font-size: 35px;
      }
    }
  }

  .login-info {
    p {
      line-height: 30px;
      font-size: 14px;
      color: #999;

      span {
        color: #666;
        margin-left: 60px;
      }
    }
  }

  .user-table {
    margin-top: 20px;
  }

  .num {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .el-card {
      width: 32%;
      margin-bottom: 20px;
    }

    .icons {
      width: 80px;
      height: 80px;
      font-size: 30px;
      text-align: center;
      line-height: 80px;
      color: #fff;
    }

    .detail {
      margin-left: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .num {
        font-size: 30px;
        margin-bottom: 10px;
      }

      .txt {
        font-size: 15px;
        text-align: center;
        color: #999;
      }
    }
  }

  .graph {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    overflow-y: auto;

    .el-card {
      width: 48%;
      height: 260px;
    }
  }
}
</style>
